<script setup>
import { reactive } from 'vue'
import router from "@/router/index.js";
import { useRoute } from 'vue-router'

const menus = reactive({
    '首页': {
        name: '首页',
        path: '/user/home'
    },
    '全部商家': {
        name: '全部商家',
        path: '/user/merchant'
    },
    '全部剧本': {
        name: '全部剧本',
        path: '/user/script'
    }
})
const route = useRoute()


const isActive = (menuPath) => {
    return route.path === menuPath
}
</script>

<template>
    <div class="left">
            <button
                 class="menu-button"
                v-for="item in menus"
                :key="item.path"
                @click="router.push(item.path)"
                :class="{ 'active-btn': isActive(item.path) }">
                <strong>{{item.name}}</strong>
            </button>
    </div>
</template>

<style scoped lang="scss">
.left {
    width: 280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-button {
  padding: 8px 16px;
  background: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: rgb(119, 115, 115);
  font-size: 1rem;
  transition: all 0.3s;
  &:hover {
    background: #f0f0f0;
  }
}

.active-btn {
  background: #abcdff; /* 蓝色 */
  color: #000;
  &:hover {
    background: #abcdff;
  }
}

</style>